
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_zoom">地图添加控件</title>
    <link rel="stylesheet" type="text/css" href="../css/leaflet.css"  media="all"/>
    <link rel="stylesheet" type="text/css" href="../lib/leaflet.miniMap/Control.MiniMap.min.css"  media="all"/>
    <script type="text/javascript" src="../js/leaflet.js"></script>
    <script type="text/javascript" src="../js/iclient-leaflet.js"></script>
    <script type="text/javascript" src="../lib/leaflet.miniMap/Control.MiniMap.min.js"></script>
    <script type="text/javascript" src="../lib/leaflet.sidebyside/leaflet-side-by-side.min.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript">
    var host = "https://iserver.supermap.io";
    var map,
        baseUrl = host + "/iserver/services/map-world/rest/maps/World";
    map = L.map('map', {
        crs: L.CRS.EPSG4326, //投影坐标系统
        center: {lon: 0, lat: 0}, //地图中心点
        maxZoom: 18, //地图最大缩放级别
        zoom: 2, //初始化地图缩放级别
        boxZoom:false, //通过按Shift键的同时拖动鼠标，地图是否可以缩放到指定的矩形区域。
        scrollWheelZoom:false, //使用鼠标滚轮是否可以缩放地图。如果通过'center'，则无论鼠标在何处，它都会缩放到视图的中心。
        dragging:false, //地图是否可以通过鼠标/触摸拖动
        doubleClickZoom:false, //按住shift键，是否可以通过双击地图来放大地图和通过双击来缩小地图。如果通过 'center'，则双击缩放将缩放到视图的中心，无论鼠标位于何处。
        zoomControl:false //默认情况下是否将缩放控件添加到地图。
    });
    L.control.zoom().addTo(map); //缩放（右上角）
    L.control.scale().addTo(map);//比例尺（左下角）
    L.control.layers().addTo(map);//图层切换（右上角）
    L.control.sideBySide().addTo(map);//卷帘（地图中心）
    var osm = L.supermap.tiledMapLayer(baseUrl, {minZoom: 5, maxZoom: 18,noWrap: true});
    map.addLayer(osm);
    L.supermap.tiledMapLayer(baseUrl).addTo(map);
    map.setView(L.latLng(59.92448055859924, 10.758276373601069), 10);
    var osm2 = L.supermap.tiledMapLayer(baseUrl, {minZoom: 0, maxZoom: 13,noWrap: true});

    L.control.minimap(osm2, {mapOptions:{ logoControl: false},toggleDisplay: true}).addTo(map); //鹰眼图
</script>
</body>
</html>